<!--
 * @Author: Devin
 * @Date: 2022-04-11 18:04:04
 * @LastEditors: Devin
 * @LastEditTime: 2022-06-13 10:27:18
-->
<!--
 * @Author: Devin
 * @Date: 2022-04-11 18:04:04
 * @LastEditors: Devin
 * @LastEditTime: 2022-04-25 16:48:33
-->
<template>
  <div class="components">
    <div class="left">
      <el-card id="base">
        <template #header>
          <div class="el-card-header">基础用法</div>
          <div class="el-card-header-tip">
            如果你使用的是<code>hash</code>路由模式，则<code>url</code>不会出现锚点形式，组件对路由模式<code>hash</code>和<code>history</code>两种方式都做了支持，虽然进行了支持但是还是建议使用<code>history</code>路由模式。
            <br /><br />
            暂时标题层级仅支持两级
          </div>
        </template>
        <CcAnchor :sections="sections"> </CcAnchor>
        <Code><div v-html="code.code"></div></Code>
      </el-card>
      <el-card id="取消背景">
        <template #header>
          <div class="el-card-header">取消背景</div>
          <div class="el-card-header-tip">支持取消背景</div>
        </template>
        <CcAnchor :sections="sections" :showBackground="false"> </CcAnchor>
        <Code><div v-html="code.code1"></div></Code>
      </el-card>
      <el-card id="取消侧面的轨道">
        <template #header>
          <div class="el-card-header">取消侧面的轨道</div>
          <div class="el-card-header-tip">支持取消轨道</div>
        </template>
        <CcAnchor :sections="sections" :showRail="false"> </CcAnchor>
        <Code><div v-html="code.code2"></div></Code>
      </el-card>

      <el-card id="固定位置">
        <template #header>
          <div class="el-card-header">固定位置</div>
          <div class="el-card-header-tip">当设置了固定位置参数后，滚动位置超过元素本身位置时，将被固定一个位置，提供了三个参数<code>offset</code>、<code>position</code>、<code>z-index</code>详情参见 ↓</div>
        </template>

        <CcAnchor :sections="sections" :offset="120" width="150px"> </CcAnchor>
        <Code><div v-html="code.code3"></div></Code>
      </el-card>

      <el-card id="滚动到">
        <template #header>
          <div class="el-card-header">滚动到</div>
        </template>
<CcAnchor :sections="sections" ref="CcAnchor1"> </CcAnchor>
<CcButton @click="scrollTo('base')">滚动到基础用法</CcButton>
<CcButton @click="scrollTo('固定位置')">滚动到固定位置</CcButton>
        <Code><div v-html="code.code4"></div></Code>
      </el-card>
      <el-card id="anchor">
        <template #header>
          <div class="el-card-header">Anchor 属性</div>
        </template>
        <DocTable :data="tableList"></DocTable>
      </el-card>
      <el-card id="anchorFun">
        <template #header>
          <div class="el-card-header">Anchor 方法</div>
        </template>
        <DocTable :data="tableListFun" tableType="fun"></DocTable>
      </el-card>
      <!-- <div style="height: 500px"></div> -->
    </div>
    <div class="right">
      <CcAnchor :sections="sections" :offset="120" width="150px"> </CcAnchor>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from '@vue/runtime-core';
import CcAnchor from '@/components/packages/cc-anchor/src/main.vue';
import DocTable from '@/components/code/docTable.vue';
import { tableList, tableListFun } from '@/docs/anchor';
import code from './code';
export default defineComponent({
  name: '',
  components: { CcAnchor, DocTable },
  setup() {
    const state = reactive({
      code,
sections: [
  {
    label: '基础用法',
    id: 'base',
    children: [{ label: '取消背景' }, { label: '取消侧面的轨道' }]
  },

  { label: '固定位置' },
  { label: '滚动到' },
  { id: 'anchor', label: 'Anchor 属性' },
  { id: 'anchorFun', label: 'Anchor 方法' }
],
      tableList,
      tableListFun
    });

    const CcAnchor1 = ref<any>(null);
const scrollTo = (id: string) => {
  CcAnchor1.value.scrollTo(id);
};
    return { ...toRefs(state), CcAnchor1, scrollTo };
  }
});
</script>
<style scoped lang="scss"></style>
